<template>
  <a-flex vertical :gap="'middle'">
    <Bubble
      placement="start"
      content="Good morning, how are you?"
      :avatar="{ icon: userOutlinedIcon, style: fooAvatar }"
    />
    <Bubble
      placement="start"
      content="What a beautiful day!"
      :styles="{ avatar: hideAvatar }"
      :avatar="{}"
    />
    <Bubble
      placement="end"
      content="Hi, good morning, I'm fine!"
      :avatar="{ icon: userOutlinedIcon, style: barAvatar }"
    />
    <Bubble
      placement="end"
      content="Thank you!"
      :styles="{ avatar: hideAvatar }"
      :avatar="{}"
    />
  </a-flex>
</template>

<script setup name="BubbleAvatarAndPlacement">
import { h } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { Bubble } from 'ant-design-x-vue'

const userOutlinedIcon = h(UserOutlined)

const fooAvatar = {
  color: '#f56a00',
  backgroundColor: '#fde3cf',
}

const barAvatar = {
  color: '#fff',
  backgroundColor: '#87d068',
}

const hideAvatar = {
  visibility: 'hidden',
}
</script>